<script setup lang="ts">
import {ref} from "vue";
import {getList} from "@/api/home";
import {useRouter} from "vue-router";

let lists = ref()
getList().then(res=> {
    if (res.code ==200) {
        // console.log(res)
        lists.value=res.rows.map(item =>{
            item.mainPic ='http://192.168.5.120:8199'+item.mainPic
            return item
        })
    }
})

const router = useRouter()
function todetail(item) {
    router.push({
        path:'privatejump',
        query:{
            GroupId:item.articleGroupId
        }
    })
}


</script>

<template>
    <div  v-for="item in lists" :key="item.articleGroupId">
        <div class="bigBox">
            <div class="contentBox">
                <div class="title">
                    <div class="title">
                        <div class="imgBox">
                            <img src="../../assets/images/冀商风采.png" alt="">
                        </div>
                        <div class="titleText">
                            {{item.title}}
                        </div>
                    </div>
                </div>
                <div class="content">
<!--                    <router-link to="./privatejump">-->
                        <div class="imgBox" @click="todetail(item)">
                            <img :src="item.mainPic" alt="">
                        </div>
<!--                    </router-link>-->
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.bigBox {
    margin: 12px auto 0;
    width: 351px;
    border-radius: 5px;
    background-color: #ffffff;
    overflow: hidden;
    .contentBox {
        margin:  12px 12px 5px 12px;
        .title {
            height: 21px;
        }
        .content {
            margin: 10px auto 0;
            .imgBox {
                width: 327.5px;
                height: 187.5px;
                >img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
.title {
    display: flex;
    .imgBox {
        margin: 3px 8px 3px 0;
        width: 15px;
        height: 15px;
    }
    .titleText {
        font-size: 15px;
    }
}

</style>